<template>
	<view>
		<u-sticky offset-top="0">
			<view class="search">
				<u-search shape="round"></u-search>
			</view>
		</u-sticky>
		<view class="roads">
			<view class="road" @click="handleNavToDetail" v-for="it in 6">
				<view class="c-content">
					<view class="c-title">
						<text class="desc">
							【xx通知】建议景区多设置点石凳子
						</text>
					</view>
					<view class="c-desc">
						这里是景点简介这里是景点简介这里是景点简介这里是景点简介这里是景点简介这里是景点简介这里是景点简介这里是景点简介这里是景点简介这里是景点简介这里是景点简介这里是景点简介这里是景点简介
					</view>
					<view class="btm-msg">
						<text>2024-09-04</text>
						<u-icon name="arrow-right" color="#333" size="18"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

				titleStyle: {
					color: "#fff"
				},
			};
		},
		methods:{
			handleNavToDetail(){
				uni.navigateTo({
					url:'/pages/notice/noticeDetail/noticeDetail'
				})
			},
			handleBack(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.search {
		background-color: #fff;
		padding: 22upx 30upx;
		box-sizing: border-box;
	}

	.roads {
		background-color: $uni-color-bg;
		min-height: 100vh;
		padding: 22upx 30upx;
		box-sizing: border-box;

		.road {
			display: flex;
			align-items: center;
			padding: 22upx 30upx;
			border-radius: 12upx;
			box-sizing: border-box;
			background-color: #fff;
			margin-bottom: 22upx;
			border-bottom: 1upx solid $uni-color-bg-s;

			image {
				width: 160upx;
			}

			.c-content {
				display: flex;
				flex-direction: column;
				width: calc(100%);
				margin-left: 20upx;

				.c-title {
					font-size: 34upx;
					font-weight: 600;
					display: flex;
					width: calc(100%);
					align-items: center;
					justify-content: space-between;
					padding-bottom: 22upx;
					margin-bottom: 22upx;
					border-bottom: 1upx solid $uni-color-bg-s;

					.desc {
					}
				}

				.c-desc {
					color: #666;
					font-size: 28upx;
					margin: 8upx 0;
					margin-bottom: 16upx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					/* 定义显示的行数 */
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.btm-msg {
					display: flex;
					align-items: center;
					font-size: 28upx;
					color: #999;
					justify-content: space-between;
					>text {
						margin-right: 22upx;

						&:last-child {
							margin-left: auto;
						}
					}
				}

				.tags {
					display: flex;

					.tag {
						background-color: $uni-color-bg-s;
						padding: 8upx 16upx;
						font-size: 26upx;
						margin-right: 8upx;
						color: $uni-color-primary;
					}
				}
			}
		}
	}
</style>
